<style>
.reader {position:fixed; top:10px; <{if $addition}>left:7%; right:23%;<{else}>left:10%; right:10%;<{/if}> bottom:10px; background-color:#EEE; border:1px solid #CCC;}
.reader #reader_content {position:fixed; top:72px; <{if $addition}>left:8%; right:24%;<{else}>left:11%; right:11%;<{/if}> bottom:20px; padding:10px; font-size:14px; line-height:150%; background-color:#FFF; overflow:auto; overflow-x:hidden;}

.reader #reader_btn_edit	 {display:inline-block; padding:2px 10px; font-size:12px; margin:0;	background-color:#ACF;    color:#FFF;}
.reader #reader_btn_del	 {display:inline-block; padding:2px 10px; font-size:12px; margin:0;	background-color:#FA6;    color:#FFF;}
.reader #reader_btn_save_as  {display:inline-block; padding:2px 10px; font-size:12px; margin:0 0 0 20px;   background-color:#ACF;    color:#FFF;}

.reader #reader_btn_e_preview {display:none; padding:2px 10px; font-size:12px; margin:0;    background-color:#ACF;    color:#FFF;}
.reader #reader_btn_e_save	    {display:none; padding:2px 10px; font-size:12px; margin:0;    background-color:#FA6;    color:#FFF;}
.reader #reader_e_msg               {display:none; padding:2px 20px; font-size:12px; margin:0;    background-color:#FFE;    color:#000; border:1px solid #DDB; white-space:nowrap;}

.reader #reader_btn_save {display:inline-block; padding:2px 10px; font-size:12px; margin:0;    background-color:#ACF;    color:#FFF;}

.reader_label {float:left; width: 100px; text-align: center; background-color:#CCC; color:#555; padding: 3px; cursor:pointer;}
.reader_label_on {background-color:#FFF; color:#000; cursor:text;}

</style>

<div id="reader" class="corner_all reader">
	<{if $article}>
		<a style="float:right;" onclick="UM_LAYER.close();"><img src="/images/reader_close.png"></a>
		<div style="margin:10px 70px 0px 30px;">
			<div style="float:right; width:300px; padding:0;">
				<{if $article.is_editable}>
					<a id="reader_btn_edit"        onclick="UM_EDITOR_P.edit();">编辑</a>
					<a id="reader_btn_del"         onclick="UM_LAYER.open('saved/show_del_article',  {'ids':'<{$article.article_id}>'}, this);">删除</a>
					<a id="reader_btn_save_as" onclick="UM_LAYER.open('reader/show_share', {'article_id':<{$article.article_id}>, 't':encodeURIComponent($('#reader_title_txt').html()), 'u':encodeURIComponent($('#reader_title_url').html())}, this);">另存 / 推荐给好友</a>

					<a id="reader_btn_e_preview" onclick="UM_EDITOR_P.preview();">预览</a>
					<a id="reader_btn_e_save"       onclick="UM_EDITOR_P.save();">保存</a>
					<span id="reader_e_msg"></span>
				<{else}>
					<a id="reader_btn_save" onclick="UM_LAYER.open('reader/show_save',  {'article_type':'<{$article_type}>', 'id':<{$article.id}>, 'article_id':<{$article.article_id}>, 't':encodeURIComponent($('#reader_title_txt').html()), 'u':encodeURIComponent($('#reader_title_url').html()) }, this);">转存 / 推荐给好友</a>
				<{/if}>
			</div>
			<div style="margin-right:320px;">
				<div id="reader_title_txt" style="font-size:20px; height:24px; line-height:24px; color:#000; word-break:break-all;  overflow:hidden;"><{$article.title}></div>
				<input id="reader_title_ipt"  value="" style="display:none; font-family:微软雅黑; font-size:16px; margin:0; padding:0;">
			</div>
		</div>
		<div style="margin:5px 70px 0px 30px;">
			<{if $article.is_editable}>
				<div id="clip" class="corner_top reader_label">剪辑版</div>
				<div id="notclip" class="corner_top reader_label">原版</div>
				<a id="reader_title_url" style="display:block; margin-left:230px; padding-top:3px; color:#777; font-size:12px; height:16px; word-break:break-all; overflow:hidden;" href="<{$article.url}>" target="_blank">原文地址：<{$article.url}></a>
			<{else}>
				<a id="reader_title_url" style="display:block; margin-left:20px;  padding-top:3px; color:#777; font-size:12px; height:16px; word-break:break-all; overflow:hidden;" href="<{$article.url}>" target="_blank">原文地址：<{$article.url}></a>
			<{/if}>
		</div>
		<div id="reader_content" class="corner_all">
			<iframe id="reader_iframe" width="100%" frameborder="0" height="100%" scrolling="auto" style="background-color:#FFF; padding:0; margin:0;" src="about:blank"></iframe>
		</div>
		
		<{if $addition}>
			<div class="corner_all" style="position:fixed; top:10px; left:77%; right:5%; background-color:#EEE; border:1px solid #CCC; padding:20px 10px; border-left:none;">
				<div style="border-bottom: 1px solid #CCC; padding:5px 10px;">
					<div style="margin:5px 0; color:#777;">来自<{if $addition.circle.privacy == 'private'}>私密<{/if}>阅读圈：</div>
					<a href="/circle.php?id=<{$addition.circle.id}>" target="_blank" style="font-size:16px;  font-family: 微软雅黑,黑体; <{if $addition.circle.privacy == 'private'}>color:#851;<{/if}> "><{$addition.circle.title}></a>
				</div>
				<div style="padding:10px;">
					<{section name=i loop=$addition.articles}>
					<a onclick="UM_LAYER.close(); open_reader(<{$addition.articles[i].id}>, 'circle')" style="display:block; margin-bottom:10px; height:14px; line-height:14px; overflow:hidden;"><{$addition.articles[i].title}></a>
					<{/section}>
				</div>
				<div style="text-align:right;">
					<{if $addition.show_type == 'follow'}>
						<button onclick="UM_LAYER.open('circle/show_follow', {'id':<{$addition.circle.id}>}, this)">订阅</button>
					<{elseif $addition.show_type == 'join'}>
						<span style="margin:5px 0; color:#777;">好友<a href="/u.php?u=<{$addition.inviter_id}>" target="_blank"><{$addition.inviter_nickname}></a>推荐</span>
						<button onclick="UM_LAYER.open('circle/show_join', {'id':<{$addition.circle.id}>, 'inviter_id':<{$addition.inviter_id}>}, this)">加入</button>
					<{/if}>
				</div>
			</div>
		<{/if}>
		
		<script type="text/javascript">
			var UM_EDITOR_P = new function () {
				this.label = function label (t) {
					UM_EDITOR_P.reset_btn();
					if (t == 'clip') {
						$('#clip').addClass('reader_label_on').unbind("click");
						$('#notclip').removeClass('reader_label_on').bind("click", function () {label('notclip')});
						$('#reader_iframe').attr('src', '/reader_i.php?id=<{$article.content_id}>&c=<{$code}>&t=clip');
					} else {
						$('#notclip').addClass('reader_label_on').unbind("click");
						$('#clip').removeClass('reader_label_on').bind("click", function () {label('clip')});
						$('#reader_iframe').attr('src', '/reader_i.php?id=<{$article.content_id}>&c=<{$code}>&t=notclip');
					}
				}
				this.edit = function () {
					document.getElementById('reader_iframe').contentWindow.edit();
					var ob_txt = $('#reader_title_txt');
					$('#reader_title_ipt').val(this.decodeHtml(ob_txt.html())).show().width(ob_txt.width());
					ob_txt.hide();
					$('#reader_btn_edit').hide();
					$('#reader_btn_del').hide();
					$('#reader_btn_save_as').hide();
					$('#reader_btn_e_preview').show();
					$('#reader_btn_e_save').show();
					$('#reader_e_msg').html('编辑中...').show();
				}
				this.reset_btn = function () {
					$('#reader_title_txt').show();
					$('#reader_title_ipt').hide();
					$('#reader_btn_edit').show();
					$('#reader_btn_del').show();
					$('#reader_btn_save_as').show();
					$('#reader_btn_e_preview').hide();
					$('#reader_btn_e_save').hide();
					$('#reader_e_msg').hide();
				}
				this.preview = function () {
					document.getElementById('reader_iframe').contentWindow.preview();
					$('#reader_btn_edit').show();
					$('#reader_btn_e_preview').hide();
				}
				this.save = function () {
					document.getElementById('reader_iframe').contentWindow.preview();
					$('#reader_e_msg').html('正在保存...').show();
					$('#reader_btn_e_preview').hide();
					$('#reader_btn_e_save').hide();
					$('#reader_btn_edit').hide();
					
					var id			= '<{$article.content_id}>';
					var title 		= $('#reader_title_ipt').val();
					//var content 	= document.getElementById('reader_iframe').contentDocument.getElementById('content').innerHTML;
					var content 	= document.getElementById('reader_iframe').contentDocument.body.innerHTML;
					if (id && title && content) {
						title 	= encodeURIComponent(title);
						content = encodeURIComponent(content);
						loadMod('reader/action_edit', {'id':id, 'title':title, 'content':content}, '', function(msg){
							if (msg == 'true') {
								$('#reader_e_msg').html('保存完成！').delay(2000).fadeOut(1000, function(){$('#reader_btn_save_as').show();});
								$('#reader_title_txt').html($('#reader_title_ipt').val()).show();
								UM_EDITOR_P.label('clip');
							} else {
								$('#reader_e_msg').html('未能修改！').delay(2000).fadeOut(1000, function(){$('#reader_btn_save_as').show();});
								$('#reader_title_txt').show();
							}
							$('#reader_btn_edit').show();
							$('#reader_btn_del').show();
							$('#reader_btn_e_preview').hide();
							$('#reader_btn_e_save').hide();
							$('#reader_title_ipt').hide();
						} );
					} else {
						$('#reader_e_msg').html('标题、正文不能为空！').show();
					}
				}
				this.HTML_DECODE = {
					"&lt;"  : "<", 
					"&gt;"  : ">", 
					"&amp;" : "&", 
					"&nbsp;": " ", 
					"&quot;": "\"", 
					"&copy;": "©"
				}
				this.REGX_ENTITY_NUM  = /\d{1,}/;
				this.REGX_HTML_DECODE = /&\w{1,};|&#\d{1,};/g;
				this.decodeHtml = function(s){
					var HTML_DECODE = this.HTML_DECODE, REGX_NUM = this.REGX_ENTITY_NUM;
					s = (s != undefined) ? s : this;
					return (typeof s != "string") ? s :
						s.replace(this.REGX_HTML_DECODE,
							function($0){
								var c = HTML_DECODE[$0];
								if(c == undefined){
									// Maybe is Entity Number
									var m = $0.match(REGX_NUM);
									if(m){
										var cc = m[0];
										cc = (cc == 160) ? 32: cc;
										c = String.fromCharCode(cc);
									}else{
										c = $0;
									}
								}
								return c;
							});
				};
			}
			
			UM_EDITOR_P.label('clip');
			
			<{if $article_type == 'save_on_edit'}>
				var ifr = document.getElementById('reader_iframe');
				if (typeof(ifr.onreadystatechange) == 'object') {
					ifr.onreadystatechange = function () {
						if (ifr.readyState == 'complete') {
							UM_EDITOR_P.edit();
						}
					}
				} else if (typeof(ifr.onload) == 'object') {
					ifr.onload = function () {
						UM_EDITOR_P.edit();
					}
				}
			<{/if}>
		</script>
		
	<{else}>
		<div style="font-size:18px; text-align: center; color:#777; padding:200px 40px;">
			此文章暂时无法访问
		</div>
	<{/if}>
</div>